<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-10-08 16:07:07
 * @LastEditTime : 2022-10-09 11:33:27
 * @FilePath     : \vue3.2.31-case\响应式基础\声明 & 访问响应式对象\readonly\App.vue
-->
<script setup lang="ts">
import { reactive, readonly } from 'vue'

const proxyObj = reactive({
  childObj: {
    hobby: 'coding'
  }
});


const readonlyObj = readonly(proxyObj);

//readonly的源变化了，readonly后的也会改变
//readonly只能读，不能写
proxyObj.childObj.hobby = 'play';

console.log('readonlyObj.childObj.hobby :>> ', readonlyObj.childObj.hobby);   //play

//警告
// readonlyObj.childObj.hobby = 'play';

</script>

<template>
  <h3>readonly</h3>
  <h5>
    作用：创建只读数据，只能读，不能写，写会警告
  </h5>
  <h5>
    注意：<br>
    1、readonly的源变化了，readonly后的也会改变 <br>
    2、对任何嵌套属性的访问都将是只读的
  </h5>
</template>

<style scoped>
ul,li{
  list-style: none;
}
</style>
